<%--
  Created by IntelliJ IDEA.
  User: Wzzz.Kingly
  Date: 2022/5/30
  Time: 19:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>fuckyou</title>
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>

<%--  行内工具栏--%>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="resetPassword">重置密码</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
<%--顶部工具栏--%>
<script type="text/html" id="toolbarDemo">
  <a class="layui-btn  layui-btn-sm" lay-event="add">添加</a>
  <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">批量删除</a>
</script>

<%--顶部搜索栏（数据表格）--%>
  <form class="layui-form" action="">
    <div class="layui-inline">
      <label class="layui-form-label">用户编号</label>
      <div class="layui-input-inline">
        <input type="text" name="userid" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">部门编号</label>
      <div class="layui-input-inline">
        <input type="text" name="deptid" placeholder="部门编号" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
        <button type="reset" class="layui-btn layui-btn-primary" id="search_reset" >重置</button>
      </div>
    </div>
  </form>
<%--弹出的添加框（表单）--%>
<form class="layui-form" action=""  id="saveUserForm"    style="display: none;" >
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" id="username" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">部门编号</label>
    <div class="layui-input-block">
<%--      <input type="text" name="deptid" required  lay-verify="required" placeholder="请输入部门编号" autocomplete="off" class="layui-input">--%>
<select name="deptid" id="selectdetpid"></select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男" checked="">
      <input type="radio" name="sex" value="1" title="女">
<%--      <input type="text" name="sex" required  lay-verify="required"  autocomplete="off" class="layui-input">--%>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" required  lay-verify="required|email"  autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-block">
      <input type="text" name="phonenumber" required  lay-verify="required|phone"   autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <input type="hidden" name="avatar" id="avatar">
    <div class="layui-upload-list">
      <img class="layui-upload-img" id="demo1" style="width: 100px;height: 80px">
      <SPAN id="demoText" style="color: #ff0000"></SPAN>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <%--进度条--%>
      <div style="width: 95px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demoprogress1">
          <div class="layui-progress-bar" lay-percent=""></div>
        </div>
      </div>
      <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
<%--      <input type="checkbox" name="status" lay-skin="switch" lay-filter="switchAdd" lay-text="0|1" value="0" checked="">--%>
  <input type="radio" name="status" value="0" title="正常" checked="">
  <input type="radio" name="status" value="1" title="停用">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block" >
      <input type="radio" name="role_id" value="54" title="普通人员" lay-verify="required" checked>
      <input type="radio" name="role_id" value="1" title="管理员" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">创建者</label>
    <div class="layui-input-block">
      <input type="text" name="create_by"  value="${userinfo.username}" required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formSaveUser" id="addSub">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<%--弹出的修改框（表单）--%>
<form class="layui-form" action=""  id="updateUserForm" lay-filter="ak" style="display: none">
  <div class="layui-form-item" >
    <label class="layui-form-label" >用户ID</label>
    <div class="layui-input-block">
      <input type="text" name="userid" id="userid" required  readonly lay-verify="required"  autocomplete="off" class="layui-input" aria-readonly="true">
<%--
 <input type="text" name="userid" required  readonly lay-verify="required"  autocomplete="off" class="layui-input" style="display: none">--%>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" id="updateusername"  readonly required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
  </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="0" title="男" checked="">
      <input type="radio" name="sex" value="1" title="女">
<%--      <input type="text" name="sex" required  lay-verify="required"  autocomplete="off" class="layui-input">--%>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" required  lay-verify="required|email"  autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">部门编号</label>
    <div class="layui-input-block">
      <select name="deptid" id="updateselectdetpid"></select>
<%--      <input type="text" name="deptid" required  lay-verify="required"  autocomplete="off" class="layui-input">--%>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-block">
      <input type="text" name="phonenumber" required  lay-verify="required|phone"  autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <input type="hidden" name="avatar" id="updateavatar">
    <div class="layui-upload-list">
      <img class="layui-upload-img" id="demo2" style="width: 100px;height: 80px">
      <SPAN id="demoText2" style="color: #ff0000"></SPAN>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <%--进度条--%>
      <div style="width: 95px;">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demoprogress2">
          <div class="layui-progress-bar" lay-percent=""></div>
        </div>
      </div>
      <button type="button" class="layui-btn" id="test2">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
      <input type="radio" name="status" value="0" title="正常" checked="">
      <input type="radio" name="status" value="1" title="停用">
<%--      <input type="checkbox" name="status" lay-skin="switch" lay-filter="switchAdd" lay-text="0|1" value="0" checked="">--%>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block" id="roleS">
      <input type="radio" name="role_id" value="54" title="普通人员" lay-verify="required">
      <input type="radio" name="role_id" value="1" title="管理员" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">修改者</label>
    <div class="layui-input-block">
      <input type="text" name="update_by" value="${userinfo.username}" required  lay-verify="required"  autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formUpdateUser" id="updateSub">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<%--  重置密码框--%>
<form class="layui-form" action=""  id="resetPasswordForm" lay-filter="cp" style="display: none">
  <div class="layui-form-item">
  <label class="layui-form-label">用户id</label>
  <div class="layui-input-block">
    <input type="text" name="userid" required  lay-verify="required"  autocomplete="off" class="layui-input">
  </div>
  </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="text" name="password" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formResetPassword">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
  <table id="demo" lay-filter="test"></table>
  <script>
    layui.use(['table','form','jquery','upload','element'], function(){
      var table = layui.table,form=layui.form,$=layui.$, upload=layui.upload,element=layui.element;
      form.render();
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 500
        ,url: '${pageContext.request.contextPath}/userInfo/selectAllUserInfo.do' //数据接口
        ,page: true //开启分页
        ,limit:10
        ,limits:[5,10,15,20]
        ,toolbar:'#toolbarDemo'
        ,autoSort:true
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'userid', title: 'ID', width:120, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:120}
          ,{field: 'password', title: '密码', width:180}
          ,{field: 'status',title: '状态',width: 70,
            templet: function (d) {
              if (d.status == "0")
                return '<button class="layui-btn layui-btn-xs">正常</button>';
              else if (d.status == "1")
                return '<button class="layui-btn layui-btn-danger layui-btn-xs">停用</button>';
            }
          }
          ,{field: 'sex', title: '性别', width:70,
            templet: function (d) {
              if (d.sex === "0")
                return '<span>男</span>';
              else if (d.sex === "1")
                return '<span>女</span>';
            }}
          ,{field: 'salt', title: '盐值', width:180}
          ,{field: 'email', title: '邮箱', width:180}
          ,{field: 'phonenumber', title: '手机号', width:180}
          ,{field: 'deptid', title: '部门编号', width: 100}
          ,{field: 'dept_name', title: '部门名称', width: 100,
            templet: function(d){
            return d.dept.dept_name;
            }
          }
          ,{field: 'create_by', title: '创建者', width: 100}
          ,{field: 'create_time', title: '创建时间', width: 100}
          ,{field: 'update_by', title: '修改者', width: 100}
          ,{field: 'update_time', title: '修改时间', width: 100}
          // ,{field: 'avatar', title: '头像', width: 120, sort: true}
          ,{field:'avatar', title: '头像', width: 200 ,height:200
            ,templet: function(d){
              console.log(d.LAY_INDEX); //得到序号。一般不常用
              console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增）。一般不常用
              console.log(d)
              //得到当前行数据，并拼接成自定义模板
              return '<img src="'+d.avatar+'" alt="" width="100px" height="80px"></img>'
            }
          }
          ,{fixed: 'right', width: 220, title:'操作', align:'center', toolbar: '#barDemo'}
        ]]
      });
      //触发排序事件
      table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        console.log(obj.field); //当前排序的字段名
        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); //当前排序的 th 对象
        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('demo', {
          initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
          ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            field: obj.field //排序字段
            ,order: obj.type //排序方式
          }
        });

        // layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
      });

      //监听头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data,layEvent=obj.event; //获取选中的数据
        switch(obj.event){
          case 'add':
            // layer.msg('添加');
            //弹出对话框，添加用户的form表单
            layer.open({
              title: '添加用户',
              type: 1,
              content: $('#saveUserForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
              area: ['500px', '500px']
            });

            //填充部门下拉框deptidSelect
            $.ajax({
              url:"${pageContext.request.contextPath}/userInfo/selectDept.do",
              type:"POST",
              dataType:"JSON",
              success:function (ret) {
                if(ret.code==0){
                  //<option value="0">写作</option>
                  var htmlStr="";
                  for (let i = 0; i < ret.data.length; i++) {
                    htmlStr+="<option value="+ret.data[i].dept_id+">"+ret.data[i].dept_id+":"+ret.data[i].dept_name+"</option>"
                  }
                  console.log(data,ret.data)
                  $("#selectdetpid").html(htmlStr);
                  //重新渲染表单
                  layui.use('form',function () {
                    var form=  layui.form;
                    form.render('select');
                  })
                }
              }
            })
            //用户名唯一性检查
//鼠标离开输入框判断是否重名
            $("#username").blur(function () {
              $.ajax({
                url: "${pageContext.request.contextPath}/userInfo/selectLoginByName.do",
                data: {username: $("#username").val()},
                dataType: "json",
                type: "get",
                success: function (re) {
                  if (re.code == 0) {
                    // layer.msg("名字重复，请重新输入");
                    layer.msg("恭喜，名字可用！");
                    $('#addSub').removeClass("layui-btn-disabled").attr("disabled", false);

                  } else {
                    // $("#username").next().html("重名");
                    layer.msg("名字重复，请重新输入");
                    $('#addSub').addClass("layui-btn-disabled").attr("disabled", true);
                  }
                }
              })
            })
            //执行实例 上传图片
            var uploadInst = upload.render({
              elem: '#test1' //绑定元素
              , type: "post"
              , url: '${pageContext.request.contextPath}/userInfo/upload.do' //上传接口
              , accept: 'images'//只允许上传图片
              , acceptMime: 'image/*'//只显示图片文件
              /*,auto: false//禁用自动上传
              ,bindAction: '#addSub'*/
              , before: function (obj) {
                element.progress('demoprogress1', '0%'); //进度条复位
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                  $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demoprogress1', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
              }
              , done: function (res) {
                console.log(res)
                //如果上传失败
                if (res.code == 0) {
                  let src = res.data.src;
                  $("#avatar").val(src);
                  $("#demoText").html(res.msg)
                  /*$('#demo1').attr('src', src);*/
                } else {
                  $("#demoText").html(res.msg)
                  return layer.msg('上传失败');
                }
                //上传完毕回调
              }
              , error: function () {
                //请求异常回调
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                  uploadInst.upload();
                });
              }
              //进度条
              , progress: function (n, elem, e) {
                element.progress('demoprogress1', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                  layer.msg('上传完毕', {icon: 1});
                }
              }
            });
//自定义验证规则
//             form.verify({
//               email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
//               phonenumber: [/^1\d{10}$/, "请输入正确的手机号"],
//
//
//             });
            //监听form提交事件
            form.on('submit(formSaveUser)', function (data) {

              //ajax方式提交表单数据，将数据保存至数据库中
              $.ajax({
                url: "${pageContext.request.contextPath}/userInfo/insertUserInfo.do",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                  if (ret.code == 0) {
                    layui.alert("添加成功")
                    window.location.href="${pageContext.request.contextPath}/views/showUserInfo.jsp";
                    <%--window.location.href="${pageContext.request.contextPath}/userInfo/insertUserInfo.do";--%>
                    // layer.closeAll();//关闭对话框
                    // table.reload('demo', {
                    //   page: {
                    //     curr: 1 //重新从第 1 页开始
                    //   }
                    // });
                  }
                  layer.msg(ret.msg);
                }
              });
              // table.reload('demo', {
              //   page: {
              //     curr: 1 //重新从第 1 页开始
              //   }
              // });
              // return false;
            });
            break;
          case 'delete':
            if(data.length === 0){
              layer.msg('请选择一行');
            } else {
              var userids=[];
              for (let i=0;i<data.length;i++){
                userids[i] =data[i].userid;
              }
              layer.confirm("确定删除吗?",function (index){
              $.ajax({
                url: "${pageContext.request.contextPath}/userInfo/deleteUserInfoBatch.do",
                type: "POST",
                dataType: "JSON",
                data: {userid: userids.join(",")},
                success: function (data) {
                  if (data.code == 0) {
                    //关闭对话框
                    layer.closeAll(); //疯狂模式，关闭所有层
                    //刷新表格数据
                    table.reload('demo',{
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                    return  false;
                  }
                  layer.msg(data.msg);

                }
              })
              });
            }
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
        console.log(data)
                , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'resetPassword') {
          layer.msg('重置密码');
          layer.confirm('真的要重置密码吗', function (index) {
            layer.open({//弹出修改框
              title: '重置密码',
              type: 1,
              content: $('#resetPasswordForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
              area: ['500px', '300px']
            });
            //表单数据的填充
            form.val('cp', {
              "userid": obj.data.userid // "name": "value"
            });
            form.on('submit(formResetPassword)', function (data) {
              $.ajax({
                url: "${pageContext.request.contextPath}/userInfo/resetPassword.do",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                success: function (data) {
                  if (data.code == 0) {
                    layer.closeAll();
                   // window.location.href = "/myMaven/login.jsp";
                    table.reload('demo',{
                      page:{
                        curr:1
                      }
                    });
                  }
                }
              });
              return false;
            });

          });
        }

         else if (layEvent === 'del') {
          layer.confirm('真的删除行么', function (index) {
            //删除数据库中
            $.ajax({
              url: "${pageContext.request.contextPath}/userInfo/deleteUserInfoById.do",
              type: "POST",
              dataType: "JSON",
              data: {userid: data.userid},
              success: function (data) {
                if (data.code == 0) {
                  //关闭对话框
                  layer.closeAll(); //疯狂模式，关闭所有层
                  //刷新表格数据
                  table.reload('demo',{
                    page:{
                      curr:1
                    }
                  });
                }
                layer.msg(data.msg);
              }

            });
          });
          //修改用户数据
        } else if (layEvent === 'edit') {
          layer.open({//弹出修改框
            title: '修改用户',
            type: 1,
            content: $('#updateUserForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            area: ['500px', '300px']
          });
         //表单数据的填充
          form.val('ak', {
            "userid": obj.data.userid // "name": "value"
            ,"username": obj.data.username
            ,"password": obj.data.password
            ,"dept_id": obj.data.dept_id
            ,"email":obj.data.email
            ,"phonenumber":obj.data.phonenumber
            ,"status":obj.data.status
          });
          $.ajax({
            url:"${pageContext.request.contextPath}/userInfo/selectDept.do",
            type:"POST",
            dataType:"JSON",
            success:function (ret) {
              if(ret.code==0){
                //<option value="0">写作</option>
                var htmlStr="";
                for (let i = 0; i < ret.data.length; i++) {
                  htmlStr+="<option value="+ret.data[i].dept_id+">"+ret.data[i].dept_id+":"+ret.data[i].dept_name+"</option>"
                }
                console.log(data,ret.data)
                $("#updateselectdetpid").html(htmlStr);
                //重新渲染表单
                layui.use('form',function () {
                  var form=  layui.form;
                  form.render('select');
                })
              }
            }
          })
//执行实例 上传图片
          var uploadInst = upload.render({
            elem: '#test2' //绑定元素
            , type: "post"
            , url: '${pageContext.request.contextPath}/userInfo/upload.do' //上传接口
            , accept: 'images'//只允许上传图片
            , acceptMime: 'image/*'//只显示图片文件
            /*,auto: false//禁用自动上传
            ,bindAction: '#addSub'*/
            , before: function (obj) {
              element.progress('demoprogress2', '0%'); //进度条复位
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {
                $('#demo2').attr('src', result); //图片链接（base64）
              });
              element.progress('demoprogress2', '0%'); //进度条复位
              layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
              console.log(res)
              //如果上传失败
              if (res.code == 0) {
                let src = res.data.src;
                $("#updateavatar").val(src);
                $("#demoText2").html(res.msg)
                /*$('#demo1').attr('src', src);*/
              } else {
                $("#demoText2").html(res.msg)
                return layer.msg('上传失败');
              }
              //上传完毕回调
            }
            , error: function () {
              //请求异常回调
              //演示失败状态，并实现重传
              var demoText = $('#demoText2');
              demoText2.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              demoText2.find('.demo-reload').on('click', function () {
                uploadInst.upload();
              });
            }
            //进度条
            , progress: function (n, elem, e) {
              element.progress('demoprogress2', n + '%'); //可配合 layui 进度条元素使用
              if (n == 100) {
                layer.msg('上传完毕', {icon: 1});
              }
            }
          });
          //鼠标离开输入框判断是否重名
          $("#updateusername").blur(function () {
            $.ajax({
              url: "${pageContext.request.contextPath}/userInfo/selectLoginByName.do",
              data: {username: $("#updateusername").val(),userid:$("#userid").val()},
              dataType: "json",
              type: "get",
              success: function (re) {
                if (re.code == 0) {
                  // layer.msg("名字重复，请重新输入");
                  // layer.msg("恭喜，名字可用！");
                  $('#updateSub').removeClass("layui-btn-disabled").attr("disabled", false);

                } else {
                  // $("#username").next().html("重名");
                  layer.msg("名字重复，请重新输入");
                  $('#updateSub').addClass("layui-btn-disabled").attr("disabled", true);
                }
              }
            })
          })
          form.on('submit(formUpdateUser)', function(data){
            //ajax方式提交表单数据，将数据保存至数据库中
            $.ajax({
              url:"${pageContext.request.contextPath}/userInfo/updateUserInfo.do",
              type:"POST",
              dataType:"JSON",
              data:data.field,
              success:function (ret) {
                if(ret.code==0){
                  window.location.href="${pageContext.request.contextPath}/views/showUserInfo.jsp";
                  // layer.closeAll();//关闭对话框
                  // table.reload('demo', {
                  //   page: {
                  //     curr: 1 //重新从第 1 页开始
                  //   }
                  // });
                }
                layer.msg(ret.msg);
              }
            });
            table.reload('demo', {
              page: {
                curr: 1 //重新从第 1 页开始
              }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        }
      });

      //顶部form部分
      form.on('submit(formDemo)', function(data){
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        table.reload('demo', {
          where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            userid: data.field.userid //排序字段
            ,deptid:data.field.deptid//排序方式
          }, page: {
            curr: 1 //重新从第 1 页开始
          }
        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
      $("#search_reset").click(function () {
        table.reload('demo', {
          where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            userid: "" //第一个查询条件
            ,deptid:"" //第二个查询条件
          },
          page: {
            curr: 1 //重新从第 1 页开始
          }
        })
      });
    });
  </script>
  </body>
</html>
